<div id="useradd">
	<div class="useradd">
		<div class="row">
			<div class="col-xs-12">
				<div class="box box-info">
					<form id="useradd-form" name="user-form" class="form-horizontal bv-form" novalidate="novalidate">
						<div class="box-header">
							<div class="col-xs-12 text-center">
								<div class="avatar-container text-center">
									<img src="/static/dist/img/user2-160x160.jpg" id="avatarImg" class="avatar-img">
								</div>
								<div>
									<button type="button" class="btn btn-sm btn-camera" data-btn-type="upload"><i class="fa fa-camera">&nbsp;上传/更改头像</i></button>
								</div>
							</div>
						</div>
						<div class="box-body">
							<div class="col-md-4">
								<div class="form-group has-feedback">
									<label for="birthday" class="col-sm-3 control-label">昵称</label>
									<div class="input-group date col-sm-8" style="padding-left: 15px; padding-right: 15px;">
										<input type="text" class="form-control username" data-flag="datepicker" name="username3" placeholder="昵称" data-bv-field="birthday"><i class="form-control-feedback" data-bv-icon-for="birthday" style="display: none;"></i>
										<small data-bv-validator="notEmpty" data-bv-validator-for="birthday" class="help-block" style="display: none;">请输入出生日期</small><small data-bv-validator="date" data-bv-validator-for="birthday" class="help-block" style="display: none;">请输入有效日期</small></div>
								</div>
								<div class="form-group">
									<label for="telphone" class="col-sm-3 control-label">姓名</label>

									<div class="col-sm-6">
										<input type="text" class="form-control" id="name" name="nickname3" placeholder="姓名" data-bv-field="nickname"><i class="form-control-feedback" data-bv-icon-for="name" style="display: none;"></i>
									</div>
								</div>
								<div class="form-group">
									<label for="telphone" class="col-sm-3 control-label">邮箱</label>
									<div class="col-sm-8">
										<input type="email" class="form-control" id="telphone" name="email3" placeholder="邮箱">
									</div>
								</div>
							</div>
							<div class="col-md-8">
								<div class="form-group has-feedback">
									<label for="email" class="col-sm-3 control-label">电话</label>
									<div class="col-sm-8">
										<input type="text" class="form-control" id="email" name="phone3" placeholder="电话" data-bv-field="email"><i class="form-control-feedback" data-bv-icon-for="email" style="display: none;"></i>
										<small data-bv-validator="notEmpty" data-bv-validator-for="email3" class="help-block" style="display: none;">请输入邮件</small><small data-bv-validator="emailAddress" data-bv-validator-for="email" class="help-block" style="display: none;">非法的邮件格式</small></div>
								</div>
								<div class="form-group has-feedback">
									<label class="col-sm-3 control-label">性别</label>

									<div class="col-sm-8">
										<span style="position: relative;top: -4px;margin-right: 5px;">男</span><input type="radio" name="sex3" style="width: 20px;height: 20px;outline: none;" value="男"><i class="form-control-feedback" data-bv-icon-for="email" style="display: none;"></i>
										<span style="position: relative;top: -4px;margin-right: 5px;">女</span><input type="radio" name="sex3" style="width: 20px;height: 20px;outline: none;" value="女"><i class="form-control-feedback" data-bv-icon-for="email" style="display: none;"></i>
										<!--<label class="control-label"> <div class="iradio_square-green" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="radio" name="sex" data-flag="icheck" class="square-green" value="1" data-bv-field="sex" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div> 男
                                    </label> &nbsp; <label class="control-label"> <div class="iradio_square-green" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="radio" name="sex" data-flag="icheck" class="square-green" value="0" data-bv-field="sex" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div><i class="form-control-feedback" data-bv-icon-for="sex" style="display: none;"></i> 女
                                </label>-->
										<small data-bv-validator="notEmpty" data-bv-validator-for="sex" class="help-block" style="display: none;">请选择性别</small></div>
								</div>
								<div class="form-group has-feedback">
									<label for="loginName" class="col-sm-3 control-label">住址</label>

									<div class="col-sm-9">
										省份/直辖市：
										<select id="pre" name="address3"style="width: 60px;">
											<option value="">请选择</option>
										</select>
										市：
										<select id="city"style="width: 70px;">
										</select>
										区：
										<select id="area"style="width: 70px;">
										</select>
										<!--<input type="text" class="form-control" id="loginName" name="address" placeholder="登录名" data-bv-field="loginName"><i class="form-control-feedback" data-bv-icon-for="loginName" style="display: none;"></i>-->
										<small data-bv-validator="notEmpty" data-bv-validator-for="loginName" class="help-block" style="display: none;">请输入登录名</small></div>
								</div>
								<div class="form-group">
									<label for="mobile" class="col-sm-3 control-label">权限等级</label>

									<div class="col-sm-8">
										<input type="text" style="width: 50px;" class="form-control"name="rolrid3" placeholder="权限" value="3">
									</div>
								</div>
							</div>
							<!-- /.box-body -->
						</div>
						<div class="box-footer text-right">
							<!--以下两种方式提交验证,根据所需选择-->
							<button type="button" id="tuichu" class="btn btn-primary" data-btn-type="cancel" style="color: black;">取消</button>
							<button type="submit" class="btn btn-primary" data-btn-type="save">提交</button>
						</div>
						<!-- /.box-footer -->
						<input type="hidden" value=""></form>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="/static/dist/js/json.js" type="text/javascript"></script>
<script type="text/javascript">
	var pre = document.getElementById("pre");
	var city = document.getElementById("city");
	var ar = document.getElementById("area");
	for(var i = 0; i < provinceList.length; i++) {
		var op = document.createElement("option");
		op.innerHTML = provinceList[i].name;
		op.value = i;
		pre.appendChild(op);
	}
	pre.addEventListener("change", function() {
		var ops = document.querySelectorAll("#city option");
		for(var i = 0; i < ops.length; i++) {
			city.removeChild(ops[i]);
		}
		var ops2 = document.querySelectorAll("#area option");
		for(var i = 0; i < ops2.length; i++) {
			ar.removeChild(ops2[i]);
		}
		var index = pre.value;
		for(var i = 0; i < provinceList[index].cityList.length; i++) {
			var op1 = document.createElement("option");
			op1.value = i;
			op1.innerHTML = provinceList[index].cityList[i].name;
			city.appendChild(op1);
		}
		for(var i = 0; i < provinceList[index].cityList[0].areaList.length; i++) {
			var op2 = document.createElement("option");
			op2.value = i;
			op2.innerHTML = provinceList[index].cityList[0].areaList[i];
			ar.appendChild(op2);
		}
	});
	city.addEventListener("change", function() {
		var ops2 = document.querySelectorAll("#area option");
		for(var i = 0; i < ops2.length; i++) {
			ar.removeChild(ops2[i]);
		}
		var index2 = city.value;
		var index = pre.value;
		for(var i = 0; i < provinceList[index].cityList[index2].areaList.length; i++) {
			var op2 = document.createElement("option");
			op2.value = i;
			op2.innerHTML = provinceList[index].cityList[index2].areaList[i];
			ar.appendChild(op2);
		}
	});
</script>